$(function () {
  getProjectTime();
  getProjectFrameWork();
  getProjectType1();

  $("#projectType1").change(function () {
    let cid = $(this).val();
    getProjectType2(cid);
  });

// 查询按钮
  $("#btnquery").click(getProject);
});

//0 获取基本分类数据通用方法
function getCate(params, callback) {
  $.ajax({
    type: "get",
    url: "/project1/getCate",
    data: {
      ...params,
    },
    success: function (res) {
      // 调用模板引擎
      if (res.data.code == 500) {
        layer.msg(res.data.msg);
        return;
      }

      callback(res);
    },
  });
}

// 1.0 获取项目周期
function getProjectTime() {
  getCate({ typeTag: "codeingtime" }, (res) => {
    let html = ``;
    res.data.forEach((item) => {
      html += `<option value="${item.typeValue}">${item.cName}</option>`;
    });
    $("#projecttime").html(html);
  });
}

// 2.0 获取技术框架
function getProjectFrameWork() {
  getCate({ typeTag: "codeframework" }, (res) => {
    let html = `<option value="-1">--请选择项目技术框架--</option>`;
    res.data.forEach((item) => {
      html += `<option value="${item.cid}">${item.cName}</option>`;
    });
    $("#Framework").html(html);
  });
}

// 3.0 获取项目大类型
function getProjectType1() {
  getCate({ typeTag: "projecttype1" }, (res) => {
    let html = `<option value="-1">--请选择项目类型--</option>`;
    res.data.forEach((item) => {
      html += `<option value="${item.cid}">${item.cName}</option>`;
    });
    $("#projectType1").html(html);
  });
}

// 4.0 获取项目小类型
function getProjectType2(pid) {
  getCate({ typeTag: "projecttype2", pid }, (res) => {
    initSelect(res.data);
  });
}

window.pids = undefined;
function initSelect(datas) {
  if (datas && datas.length > 0) {
    datas = datas.map((item) => {
      return { name: item.cName, value: item.cid };
    });
  } else {
    datas = [];
  }

  xmSelect.render({
    el: "#selectDemo",
    checkbox: true,
    repeat: false,
    autoRow: true,
    filterable: true,
    prop: { name: "name", value: "value" },
    height: "200px",
    tips: "请选择",
    tree: {
      show: true,
      showFolderIcon: true,
      showLine: true,
      indent: 20,
      expandedKeys: [-3],
      strict: false,
    },
    data: function () {
      return datas;
      // return [
      //   { name: "张三", value: "0" },
      //   { name: "李四", value: "1" },
      //   { name: "王五", value: "2" },
      //   { name: "马六", value: "3" },
      //   { name: "赵四", value: "4" },
      //   { name: "王二", value: "5" },
      // ];
    },
    on: function (data) {
      var arr = data.arr; //arr:  当前多选已选中的数据
      window.pids = arr.map((item) => item.value).join(",");
    },
  });
}

// 5.0 获取项目描述
function getProject() {
  let fid = $("#Framework").val();
  let ptypeid = $("#projectType1").val();
  let timelng = $("#projecttime").val();
  let pid = window.pids;
  if (fid==-1 || ptypeid == -1) {
    layer.msg("技术框架 和 项目大类 必须选择");
    return;
  }

  $.ajax({
    type: "get",
    url: "/project1/getprojectlist",
    data: {
      fid,
      ptypeid,
      timelng,
      pid,
    },
    success: (res) => {
      // 调用模板引擎
      if (res.code == 500) {
        if(res.msg.message){
        layer.msg(res.msg.message);
      }else{
        layer.msg('未查到数据，请更换生成条件');
      }
        // alert(res.msg)
        return;
      }

      // 成功
      let html=``;
      res.data.forEach(item=>{
        let dutys = ``;
       let project_duty =  item.project_duty;
       if(project_duty && project_duty.length>0){
        project_duty.forEach((duty,index)=>{
          dutys+=`<p>${index+1}.${duty.desc}</p>`;
        })
       }  

        html+=`
        <div data-sjsel="flatty" class="col-sm-6 col-md-4 col-lg-3 item">
            <div class="thumbnail" style="height: auto">
              <div class="caption">
               <p> <strong>项目名称：</strong>${item.project_name}</p><hr>
               <p><strong> 周期：</strong>${item.project_time}</p><hr>
               <p><strong> 项目技术：</strong>${item.project_framework}</p><hr>
                <p><strong>项目内容：</strong>${item.project_desc}</p>
                <p><hr>
                  <p><strong>负责模块：</strong>${item.project_model}</p><hr>
                  <p>
                  <strong>职责：</strong>
                  ${dutys}
                </p>
              </div>
            </div>
          </div>
        `;
      })

     $("#row").html(html);

    },
  });
}


/*
{
"code": 200,
"msg": "数据获取成功",
"data": [
{
"project_name": "人力资源管理系统（HRM）",
"project_time": "5个月",
"project_framework": "Vue2+Vuex+Vue-Router+Axios+ElementUI",
"project_desc": "iHRM是一款基于SaaS平台的人力资源管理平台，该项目采用前后分离的纯前端的SPA开发架构模式,前端项目采用业界主流前端框架Vuejs,使用流行的UI前端框架ElementUI进行界面的布局和设计. ",
"project_model": "登录,首页,组织架构,员工管理,社保管理,招聘管理,工资管理,考勤管理,公告管理,审批管理,权限管理,项目框架",
"project_duty": [
{
"id": 24,
"mid": 8,
"desc": "员工月度考勤数据统计，缺勤管理，月度工作量排名",
"isdelete": 0
},
{
"id": 25,
"mid": 9,
"desc": "系统公告发布，首页公告滚动展示",
"isdelete": 0
},
{
"id": 30,
"mid": 11,
"desc": "利用RBAC权限设计思想完成整个系统权限实现",
"isdelete": 0
},
{
"id": 19,
"mid": 6,
"desc": "利用Element-ui中的Steps 步骤条实现招聘进度显示控制",
"isdelete": 0
},
{
"id": 27,
"mid": 10,
"desc": "加班审批流程设置",
"isdelete": 0
}
]
}
]
}
*/ 